.calculator {
	box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.15);
	overflow: hidden;
}

.calculator__display {
	background-color: #222222;
	color: #fff;
	font-size: 1.714285714em;
	padding: 0.5em 0.75em;
	text-align: right;
	overflow-x: auto;
	margin-bottom: 1px;
}

.calculator__keys {
	display: grid;
	grid-gap: 1px;
	grid-template-columns: repeat(4, 1fr);

	> * {
		position: relative;
		text-align: center;
	}

	> *:active::before,
	> .is-depressed::before {
		background-color: rgba(0, 0, 0, 0.2);
		bottom: 0;
		box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.5) inset;
		content: "";
		left: 0;
		opacity: 0.3;
		position: absolute;
		right: 0;
		top: 0;
		z-index: 1;
	}
}

.key--equal {
	background-image: linear-gradient(to bottom, #fe886a, #ff7033);
	grid-column: -2;
	grid-row: 2 / span 4;
}
